<template>
  <div>
    <div>
      <el-button type="success" @click="handleExport">导出</el-button>
      <el-button type="primary" @click="dialogImportVisible = true">
        导入
      </el-button>
    </div>
    <!-- 展示分类列表的表格 -->
    <el-table
      :data="categories"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="分类名称" />
      <el-table-column prop="imageUrl" label="图标">
        <template #default="scope">
          <img
            v-if="scope.row.imageUrl"
            :src="scope.row.imageUrl"
            style="width:50px;height:50px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          {{ scope.row.status === 1 ? '正常' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>

    <!-- 导入分类对话框 -->
    <div>
      <el-dialog v-model="dialogImportVisible" title="导入分类">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
          :headers="headers"
          name="excel"
        >
          <el-button type="primary">上传</el-button>
          <template #tip>
            <div class="el-upload__tip">
              只能上传excel文件，不能超过1MB
            </div>
          </template>
        </el-upload>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { GetCategoriesByPid, ExportCates } from '@/api/category'
import { useApp } from '@/pinia/modules/app'
//3、导出按钮事件函数：导出excel文件
const handleExport = () => {
  ExportCates().then(res => {
    //获取整个响应体：整体是一个文件流
    // 创建 Blob 对象，用于包含二进制数据
    const blob = new Blob([res])
    // 创建 a 标签元素，并将 Blob 对象转换成 URL
    const link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    // 设置下载文件的名称
    link.download = '商品分类数据.xlsx'
    // 模拟点击下载链接
    link.click()
  })
}

//2、导入分类excel对话框
const dialogImportVisible = ref(false)
const uploadUrl = ref('http://localhost:8081/admin/product/category/import')
const headers = ref({ token: useApp().authorization.token })
const handleUploadSuccess = response => {
  //上传成功
  if (+response.code === 200) {
    ElMessage.success('导入分类成功')
    initData(0)
  } else {
    ElMessage.error(response.message)
  }
  dialogImportVisible.value = false
}
const handleUploadError = error => {
  ElMessage.error('网络错误')
  dialogImportVisible.value = false
}

//1、查询分类列表数据展示
const categories = ref([])
const initData = async pid => {
  const { data } = await GetCategoriesByPid(pid)
  categories.value = data
}
onMounted(() => {
  initData(0)
})
//懒加载回调函数
const load = async (row, treeNode, resolve) => {
  //row 代表点击按钮所在行的json数据
  const { data } = await GetCategoriesByPid(row.id)
  //data 代表下一级分类数据
  //resolve:可以将传入的数据自动渲染到点击行的下一级展示
  resolve(data)
}
</script>
